<%--
  Created by IntelliJ IDEA.
  User: ll
  Date: 2017/11/1
  Time: 18:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
    String webSocketPath = request.getServerName() + ":" + request.getServerPort() + path;
%>
<html>
<head>
    <title>机床温度热力图展示</title>
    <base href="<%=basePath%>">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/gray/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery/easyui1.4.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/assets/css/ace.min.css"/>
    <script type="text/javascript" src="jquery/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery/easyui1.4.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="jquery/underscore-min.js"></script>
    <style>
        #heatmap {
            width:806px;
            height:718px;
            left:308px;
            top:18px;
            z-index: 100;
        }
        body{
            text-align:center}
        #d1{
            margin:0 auto;
            width:90%;
            text-align: -webkit-center;}
        .widget-body{
            border-bottom-right-radius:10px;
            border-bottom-left-radius:10px;
        }
        .widget-main{
            /*text-align: -webkit-center;*/
            position:relative;
            height:780px;

        }
        #heatmap-bg{
            position: absolute;
            left:320px;
            top:30px;
        }
    </style>
</head>
<body style="background-color: white;padding:16px 24px;width:100%;min-height:484px;text-align: -webkit-center">
<div id="d1" style="display:block;">
    <div class="widget-box" style="margin:16px 24px;padding-bottom:15px;text-align: center;">
        <div class="widget-header header-color-blue" style="border-top-left-radius:10px;border-top-right-radius:10px;">
            <h4 style="color:white">热力图</h4>
        </div>
        <div class="widget-body">
            <div class="widget-main">
              <div id="heatmap" style="position: absolute;">
                    <%--<img src='/img/machine.png'/>--%>
                </div>
                <div id="heatmap-bg"> <img src='img/machine.png' /></div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="mintor/heatmaps/js/heatmap.js"></script>
<script type="text/javascript">
    function Dictionary() {
        var items = {};

        this.has = function (key) {
            return key in items;
        };

        this.set = function (key, value) {
            items[key] = value;
        };

        this.remove = function (key) {
            if (this.has(key)) {
                delete items[key];
                return true;
            }
            return false;
        };

        this.get = function (key) {
            return this.has(key) ? items[key] : undefined;
        };

        this.keys = function () {
            var keys = [];
            for (var k in items) {
                if (this.has(k)) {
                    keys.push(parseInt(k));
                }
            }
            return keys;
        };

        this.values = function () {
            var values = [];
            for (var k in items) {
                if (this.has(k)) {
                    values.push(parseInt(items[k]));
                }
            }
            return values;
        };

        this.clear = function () {
            items = {};
        };

        this.size = function () {
            var count = 0;
            for (var prop in items) {
                if (items.hasOwnProperty(prop)) {
                    ++count;
                }
            }
            return count;
        };

        this.getItems = function () {
            return items;
        };
    }
    var socketPath = "<%=webSocketPath%>";
    var temdatas = "";
    var temMap = new Dictionary();
    var temValue = [];
    var webSocket = new WebSocket('ws://' + socketPath + '/websocket/CFlower');
    webSocket.onerror = function (event) {			// socket错误响应事件
//        onError(event);
        console.log("error");
    };
    webSocket.onopen = function (event) {			// socket开启响应事件
//        onOpen(event);
    };
    webSocket.onmessage = function (event) {		// socket接收响应事件
        temdatas = event.data;
//        onMessage(event);
//        console.log(event.data);
        var temObjects=JSON.parse(temdatas,function (k,v) {
            if(v !='0'&v!=null&typeof(v)=='string'){
               if(v.indexOf('/') >= 0 ){
                    start = v.indexOf('/')+1;
//                   document.write(v+"yiyi"+typeof(v)+ "<br />");
                    v=v.substring(start);
                    temMap.set(k, v);}
                    else {
                    temMap.set(k, v);
                }
            }
        });
//        for(var key in temMap){
//            console.log("传感器：" + key + ",温度："+ temMap[key]);
//    }
//        temMap.forEach(function (item, key, mapObj) {
//            //document.write("传感器：" + key + ",温度："+ item + "<br />");
//            len = len +1;
//        });
//        function getLength(obj){
//            var count = 0;
//            temMap.forEach(function (item, key, mapObj) {
//                count = count +1;
//                //     document.write("传感器：" + key + ",温度："+ item + "<br />");
//            });
//            return count;
//        }
        var len = temMap.size();
        var heatmapInstance = h337.create({
            container: document.querySelector('#heatmap'),
        });
        //构建一些随机数据点,这里替换成你的业务数据
        var points = [];
        var max = 0;
        var width = 806;
        var height = 700;
        console.log(len);
        var values = temMap.values();
        while (len--) {
            var val = values[len];
            console.log(val);
            //       var val = Math.floor(Math.random()*100);
            max = Math.max(max, val);
            var point = {
                x: Math.floor(Math.random()*width),
                y: Math.floor(Math.random()*height),
                value: val
            };
            points.push(point);
        }
        var data = {
            max: max,
            data: points
        };

        //因为data是一组数据,所以直接setData
        heatmapInstance.setData(data); //数据绑定还可以使用
    };
//    var temObjects=JSON.parse(temdatas);
//    console.log(temObjects.001-SFT00-06);

    // 创建一个heatmap实例对象
    // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
    // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api

   function getLength(obj){

       var count = 0;
       temMap.forEach(function (item, key, mapObj) {
           count++;
           //     document.write("传感器：" + key + ",温度："+ item + "<br />");
       });
        return count;
    }

</script>
</html>